<template>
  <div class="majorManagement-container">
    <el-row class="header-btn">
      <el-col :span="12" class="editAdd">
        <el-button icon="el-icon-plus" type="primary" size="small" @click="addDialogVisible = true">
          添加
        </el-button>
        <el-button icon="el-icon-delete" type="danger" size="small" @click="handleDelete">
          批量删除
        </el-button>
      </el-col>
      <el-col :span="12" class="query">
        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
          <el-form-item>
            <el-input
                size="small"
                v-model.trim="queryForm.majorName"
                placeholder="请输入查询条件"
                clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" size="small" @click="queryData">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <el-table
        :data="majorList"
        :element-loading-text="elementLoadingText"

    >
      <el-table-column show-overflow-tooltip type="selection"></el-table-column>
      <el-table-column type="index" width="122px"></el-table-column>
<!--      <el-table-column prop="majorId" label="id" width="82px"></el-table-column>-->
      <el-table-column prop="majorNum" label="专业编号" width="120px"></el-table-column>
      <el-table-column prop="majorName" label="专业名称"></el-table-column>
      <el-table-column prop="departmentName" label="所属学院"></el-table-column>
      <el-table-column label="专业每班平均人数">
        <template slot-scope="scope">
          <el-input @blur="editInput(scope)" v-if="scope.row.editCell" v-model="scope.row.numberOfStudents"></el-input>
          <span @click="openInput(scope.$index)" v-else>{{scope.row.numberOfStudents}}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="查看可分班级数" width="200">
        <template slot-scope="scope">
          <el-button type="text" @click="showShowShow(scope.row.majorId)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
        title="新增专业"
        :visible.sync="addDialogVisible"
        width="40%"
        @close="addDialogClosed">
      <!-- 内容主体区域 -->
      <el-form :model="addForm" :rules="addFormRules" ref="addRuleFormRef" label-width="100px">
        <el-form-item label="专业编名" prop="majorNum">
          <el-input v-model="addForm.majorNum" type="number"></el-input>
        </el-form-item>
        <el-form-item label="专业名称" prop="majorName">
          <el-input v-model="addForm.majorName"></el-input>
        </el-form-item>
        <el-form-item prop="departmentId" label="选择所属学院">
          <el-select placeholder="请选择" v-model="addForm.departmentId">
            <el-option
                v-for="item in departmentList"
                :key="item.departmentId"
                :label="item.departmentName"
                :value="item.departmentId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="每班分配人数" prop="classId">
          <el-input v-model="addForm.numberOfStudents" type="number"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addMajor">确 定</el-button>
            </span>
    </el-dialog>

    <el-dialog
        title="专业可分班级数"
        :visible.sync="showDialogVisible"
        width="30%">
      <!-- 内容主体区域 -->
      <label style="display:inline-block;width: 88px">专业：</label><label>{{ classNumInfo.majorName }}</label><br><br>
      <label style="display:inline-block;width: 88px">每班人数：</label><label>{{ classNumInfo.numClass }}</label><br><br>
      <label style="display:inline-block;width: 88px">专业人数：</label><label>{{ classNumInfo.stuCount }}</label><br><br>
      <label style="display:inline-block;width: 88px">推荐分班数：</label><label>{{ classNumInfo.classNum }}</label><br><br>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="batchAddCG">生成班级号</el-button>
        <el-button size="mini" @click="showDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      majorList: null,
      departmentList: null,
      classNumInfo: {
        majorName: null,
        numClass: null,
        stuCount: null,
        classNum: null
      },
      listLoading: true,
      layout: 'total, prev, pager, next, jumper',
      total: 0,
      selectRows: '',
      elementLoadingText: '正在加载...',
      queryForm: {
        pageNo: 1,
        pageSize: 10,
        majorName: '',
      },
      addForm: {
        majorNum: '',
        majorName: '',
        departmentId: '',
        numberOfStudents: 32
      },
      // 添加班级表单的验证规则对象
      addFormRules: {
        majorNum: [
          {required: true, message: '专业编号不可为空且只能为数字', trigger: 'blur'}
        ],
        majorName: [
          {required: true, message: '专业名称不能为空', trigger: 'blur'}
        ],
        departmentId: [
          {required: true, message: '专业名称不能为空', trigger: 'blur'}
        ],
      },
      addDialogVisible: false,
      showDialogVisible: false,
    }
  },

  created() {
    this.fetchData()
    this.departments()
  },
  methods: {
    setSelectRows(val) {
      this.selectRows = val
    },

    openInput(scope) {
      // console.log(scope)
      var thiz = this.majorList[scope].editCell
      this.majorList[scope].editCell = !thiz
      // console.log(scope)
    },
    async editInput(scope) {
      var thiz = scope.row.editCell
      scope.row.editCell = !thiz
      const {data: res} = await this.$http.get('updateNumClass?majorId=' + scope.row.majorId + '&numClass=' + scope.row.numberOfStudents)
      // console.log(res)
      if (res.code != 200) return this.$message.error('操作失败')
      return this.$message.success('修改成功')
    },
    async showShowShow(majorId) {
      const {data: res} = await this.$http.get('classNumByMajorName?majorId=' + majorId)
      this.showDialogVisible = true
      this.classNumInfo = res.data
      // console.log(res.data)
    },
    async batchAddCG() {
      if (this.classNumInfo.stuCount == 0) return this.$message.error('该专业无学生')
      const {data: res} = await this.$http.post('batchAddCG', this.classNumInfo)
      // console.log(res)
      if (res.code != 200) return this.$message.error('操作失败')

      this.showDialogVisible = false
      return this.$message.success('班级生成成功')

    },

    // 监听添加课件对话框的关闭事件
    addDialogClosed() {
      this.$refs.addRuleFormRef.resetFields()
    },
    // 添加专业
    addMajor() {
      this.$refs.addRuleFormRef.validate(async valid => {
        if (!valid) return
        // 可以发起添加专业的网络请求
        const {data: res} = await this.$http.post('addMajor',this.addForm)
        // console.log(res)
        if (res.code != 200)
          return this.$message.error(res.msg)
        this.$message.success('专业信息添加成功！')
        this.addDialogVisible = false
        this.fetchData()
      })
    },

    handleEdit() {

    },
    async handleDelete(majorId) {
      // 提示消息
      const re = await this.$confirm('是否删除该专业信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch(err => err)

      // console.log(re)
      if (re != 'confirm') return this.$message.info('取消了删除')

      const {data: res} = await this.$http.get('deleteMajor?id='+ majorId)

      if (res.code == 500) return this.$message.error('该专业下存在班级，无法删除！')
      if (res.code != 200) return this.$message.error('删除失败！')

      this.$message.success('删除成功！')
      this.fetchData()
    },
    handleSizeChange() {

    },
    handleCurrentChange() {
    },
    queryData() {
    },
    async fetchData() {
      const {data : res} = await this.$http.get('selectMDInfo')
      // console.log(res)
      this.majorList = res.data
    },
    async departments() {
      const {data : res} = await this.$http.get('getDepAll')
      // console.log(res)
      this.departmentList = res.data
    }
  }
}
</script>

<style lang="less" scoped>
.majorManagement-container {
  width: 98%;
  background: white;
  padding: 12px 16px 12px 16px;
}

.header-btn {
  //text-align: left;
  //display: flex;
  //justify-content: space-between;
  //align-items: center;
  //color: black;
  //font-size: 20px;

  >.editAdd {
    height: 42px;
    display: flex;
    align-items: center;
    justify-items: center;
  }
  .query {
    height: 22px;
    margin-top: 22px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: flex-end;
  }
}
.el-table >.el-table-column {
  height: 12px;
}

</style>
